<!--
 * @Author: yushuang
 * @Date: 2024-12-16 10:20:05
 * @LastEditors: yushuang
 * @LastEditTime: 2024-12-20 10:15:29
 * @Description: 
-->
<script setup lang="ts">
import { computed, shallowRef } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import { useAntdToken } from '@/composables/antd-token';

const props = defineProps<{
  theme?: 'light' | 'dark' | 'inverted' | 'top' | 'side' | 'mix';
  isDark?: boolean;
  checked?: boolean;
}>();
const prefixCls = shallowRef('ant-pro-drawer-setting-block-checkbox');
const cls = computed(() => {
  return {
    [`${prefixCls.value}-item`]: true,
    [`${prefixCls.value}-theme-item`]: props.isDark,
    [`${prefixCls.value}-item-${props.theme}`]: !!props.theme,
    [`${prefixCls.value}-theme-item-${props.theme}`]: props.isDark
  };
});
const pageStyleMap = {
  dark: '暗色菜单风格',
  light: '亮色菜单风格',
  inverted: '反转色菜单色风格',
  mode: '导航模式',
  top: '顶部布局模式',
  side: '侧边栏布局模式',
  mix: '混合布局模式'
};

const { token } = useAntdToken();
</script>

<template>
  <a-tooltip>
    <template #title>
      {{ theme ? pageStyleMap[theme] : '整体风格设置' }}
    </template>
    <div :class="cls">
      <CheckOutlined v-show="checked" :style="{ color: token?.colorPrimary }" :class="`${prefixCls}-selectIcon`" />
    </div>
  </a-tooltip>
</template>
